<template>
    <div style="width: 100%">
        <!--  头部搜索和创建按钮区域-->
        <el-row :gutter="50">
            <div>
                <!--    搜索区域列-->
                <el-col :span="6">
                    <el-input
                        :disabled="!isSearchType"
                        placeholder="请输入关键字"
                        v-model="queryInfo.keyWord"
                        suffix-icon="el-icon-search"
                        class="input-with-select"
                        @focus="setPageNum"
                        @input="getStudentData"
                        clearable
                    >
                        <el-select
                            v-model="queryInfo.queryType"
                            slot="prepend"
                            placeholder="搜索类型"
                        >
                            <el-option
                                v-for="(item, index) in selectOption"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-input>
                </el-col>
                <!--    按钮区域列-->
                <el-col :span="2">
                    <el-row>
                        <el-tooltip
                            effect="dark"
                            content="添加学生(需要选择容器进行绑定)"
                            placement="top"
                            :disabled = isDisable
                        >
                            <el-button
                                type="primary"
                                icon="el-icon-plus"
                                :disabled = isDisable
                                circle
                                @click="addDialogVisible = true, studentNativePlaceTemp = ''"
                            />
                        </el-tooltip>
                    </el-row>
                </el-col>
            </div>
            <div>
                <el-radio-group
                    :disabled="isSearchType"
                    @change="getStudentData"
                    v-model="queryInfo.searchType"
                    size="medium"
                >
                    <el-radio
                        label="全部"
                        border
                    >
                        全部
                    </el-radio>
                    <el-radio
                        label="参军"
                        border
                    >
                        参军
                    </el-radio>
                    <el-radio
                        label="未就业"
                        border
                    >
                        未就业
                    </el-radio>
                    <el-radio
                        label="已就业"
                        border
                    >
                        已就业
                    </el-radio>
                    <el-radio
                        label="拟升学"
                        border
                    >
                        拟升学
                    </el-radio>
                    <el-radio
                        label="专升本"
                        border
                    >
                        专升本
                    </el-radio>
                </el-radio-group>
            </div>
        </el-row>

        <!--  表格数据区域-->
        <el-table
            :data="tableData"
            border
            stripe
            highlight-current-row
            style="width: 100%"
            :row-style="rowStyle"
            :cell-style="cellStyle"
        >
            <el-table-column
                :key="table.prop"
                v-for="table in tableHeader"
                :label="table.label"
                :prop="table.prop"
                align="center"
                :width="table.width"
                :fixed="table.fixed"
            />
            <el-table-column
                width="170"
                :formatter="dateFormatter"
                label="修改时间"
                prop="createTime"
                align="center"
            />
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="180px"
            >
                <!-- 操作按钮区域的作用域插槽-->
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        content="查看班级(可查看本学生的班级)"
                        placement="top"
                    >
                        <el-button
                            type="info"
                            icon="el-icon-view"
                            circle
                            @click="toClassRoom(scope.row.className)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="编辑学生(可编辑学生所有信息)"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            @click="editDialogVisible1(scope.row)"
                        />
                    </el-tooltip>
                    <el-tooltip

                        effect="dark"
                        v-if = !isDisable
                        content="删除学生(可删除学生全部数据)"
                        placement="top"
                    >
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            @click="deleteDialogVisible1(scope.row.id)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <!--    分页器区域-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 25, 50, 100]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            background
        />

        <!--    添加学生对话框区域-->
        <el-dialog
            title="添加学生"
            :visible.sync="addDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <el-form
                v-if="addDialogVisible"
                :model="addForm"
                :rules="addFormRules"
                ref="addFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="学生学号"
                    prop="stuId"
                >
                    <el-input
                        v-model="addForm.stuId"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="学生名称"
                    prop="name"
                >
                    <el-input v-model="addForm.name"/>
                </el-form-item>
                <el-form-item
                    label="学生性别"
                    prop="sex"
                >
                    <el-radio-group
                        v-model="addForm.sex"
                        size="medium"
                    >
                        <el-radio
                            label="男"
                            border
                        >
                            男
                        </el-radio>
                        <el-radio
                            label="女"
                            border
                        >
                            女
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    label="邮箱"
                    prop="email"
                >
                    <el-input v-model="addForm.email"/>

                </el-form-item>

                <el-form-item
                    label="班级"
                    prop="classId"
                >
                    <el-select v-model="addForm.classId" style="width: 360px" filterable placeholder="请选择">
                        <el-option
                            v-for="item in classOptions"
                            :key="item.className"
                            :label="item.className"
                            :value="item.classId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="绑定专业"
                    prop="proId"
                >
                    <el-select
                        v-model="addForm.proId"
                        filterable
                        style="width: 360px"
                        placeholder="试试搜索吧~">
                        <el-option-group
                            v-for="group in proOptions"
                            :key="group.professionalTypeName"
                            :label="group.professionalTypeName">
                            <el-option
                                v-for="item in group.professions"
                                :key="item.proName"
                                :label="item.proName"
                                :value="item.proId">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="学生电话"
                    prop="phone"
                >
                    <el-input
                        v-model="addForm.phone"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="身份证号"
                    prop="cardId"
                >
                    <el-input v-model="addForm.cardId"/>
                </el-form-item>

                <el-form-item
                    label="毕业院校"
                >
                    <el-input v-model="addForm.school"/>
                </el-form-item>

                <el-form-item
                    label="民族"
                >
                    <el-input v-model="addForm.national"/>
                </el-form-item>

                <el-form-item
                    label="学历"
                >
                    <el-input v-model="addForm.education"/>
                </el-form-item>

                <el-form-item
                    label="政治面貌"
                >
                    <el-input v-model="addForm.politicalStatus"/>
                </el-form-item>

                <el-form-item
                    label="学生籍贯"
                    prop="homeAddress"
                >
                    <el-cascader
                        style="width: 360px"
                        placeholder="试试搜索城市名称吧~"
                        v-model="studentNativePlaceTemp"
                        :options="studentNativePlaceCascaderOptions"
                        :props="{ expandTrigger: 'hover' }"
                        filterable
                        clearable
                    />
                </el-form-item>

                <el-form-item
                    label="联系地址"
                >
                    <el-input v-model="addForm.contactAddress"/>
                </el-form-item>

                <el-form-item
                    label="居住地址"
                >
                    <el-input v-model="addForm.liveAddress"/>
                </el-form-item>

                <el-form-item
                    label="就业状态"
                    prop="employmentStatus"
                >
                    <el-radio-group
                        v-model="addForm.employmentStatus"
                        size="medium"
                    >
                        <el-radio
                            label="参军"
                            border
                        >
                            参军
                        </el-radio>
                        <el-radio
                            label="未就业"
                            border
                        >
                            未就业
                        </el-radio>
                        <el-radio
                            label="已就业"
                            border
                        >
                            已就业
                        </el-radio>
                        <el-radio
                            label="拟升学"
                            border
                        >
                            拟升学
                        </el-radio>
                        <el-radio
                            label="专升本"
                            border
                        >
                            专升本
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="直属主管"
                    prop="boss"
                >
                    <el-input v-model="addForm.boss"/>
                </el-form-item>
                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="主管电话"
                    prop="bossPhone"
                >
                    <el-input
                        v-model="addForm.bossPhone"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>

                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="实习薪资"
                    prop="money"
                >
                    <el-input v-model="addForm.money"/>
                </el-form-item>
                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="企业名称"
                    prop="entName"
                >
                    <el-input v-model="addForm.entName"/>
                </el-form-item>

                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="企业岗位"
                    prop="postName"
                    width="200px"
                >
                    <el-input v-model="addForm.postName"/>
                </el-form-item>

                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="岗位职责"
                    prop="responsibility"
                >
                    <el-input
                        autosize
                        type="textarea"
                        v-model="addForm.responsibility"
                    />
                </el-form-item>
                <el-form-item
                    v-if="addForm.employmentStatus === '已就业'"
                    label="工作地址"
                    prop="workAddress"
                >
                    <el-cascader
                        style="width: 360px"
                        placeholder="试试搜索城市名称吧~"
                        v-model="addWorkAddressPlace"
                        :options="workerNativePlaceCascaderOptions"
                        :props="{ expandTrigger: 'hover' }"
                        filterable
                        clearable
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="addstudent"
        >添加学生</el-button>
      </span>
        </el-dialog>

        <!--    修改学生信息对话框-->
        <el-dialog
            title="修改信息"
            :visible.sync="editDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <el-form
                v-if="editDialogVisible"
                :model="editForm"
                :rules="editFormRules"
                ref="editFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="学生学号"
                    prop="stuId"
                    :disabled=isDisable
                >
                    <el-input
                        v-model="editForm.stuId"
                        :disabled=isDisable
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="学生名称"
                    prop="name"
                >
                    <el-input v-model="editForm.name"/>
                </el-form-item>
                <el-form-item
                    label="学生性别"
                    prop="sex"
                >
                    <el-radio-group
                        v-model="editForm.sex"
                        size="medium"
                    >
                        <el-radio
                            label="男"
                            border
                        >
                            男
                        </el-radio>
                        <el-radio
                            label="女"
                            border
                        >
                            女
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    label="邮箱"
                    prop="email"
                >
                    <el-input v-model="editForm.email"/>

                </el-form-item>

                <el-form-item
                    label="班级"
                    prop="classId"
                >
                    <el-select v-model="editForm.classId" style="width: 360px" filterable placeholder="请选择">
                        <el-option
                            v-for="item in classOptions"
                            :key="item.className"
                            :label="item.className"
                            :value="item.classId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="绑定专业"
                    prop="proId"
                >
                    <el-select
                        v-model="editForm.proId"
                        filterable
                        style="width: 360px"
                        placeholder="试试搜索吧~">
                        <el-option-group
                            v-for="group in proOptions"
                            :key="group.professionalTypeName"
                            :label="group.professionalTypeName">
                            <el-option
                                v-for="item in group.professions"
                                :key="item.proName"
                                :label="item.proName"
                                :value="item.proId">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="学生电话"
                    prop="phone"
                >
                    <el-input
                        v-model="editForm.phone"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>
                <el-form-item
                    label="身份证号"
                    prop="cardId"
                >
                    <el-input v-model="editForm.cardId"
                              onkeyup="value=value.replace(/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,'')"
                    />
                </el-form-item>

                <el-form-item
                    label="毕业院校"
                >
                    <el-input v-model="editForm.school"/>
                </el-form-item>

                <el-form-item
                    label="民族"
                >
                    <el-input v-model="editForm.national"/>
                </el-form-item>

                <el-form-item
                    label="学历"
                >
                    <el-input v-model="editForm.education"/>
                </el-form-item>

                <el-form-item
                    label="政治面貌"
                >
                    <el-input v-model="editForm.politicalStatus"/>
                </el-form-item>

                <el-form-item
                    label="学生籍贯"
                    prop="homeAddress"
                >
                    <el-cascader
                        style="width: 360px"
                        placeholder="试试搜索城市名称吧~"
                        v-model="studentNativePlaceTemp"
                        :options="studentNativePlaceCascaderOptions"
                        :props="{ expandTrigger: 'hover' }"
                        filterable
                        clearable
                    />
                </el-form-item>

                <el-form-item
                    label="联系地址"
                >
                    <el-input v-model="editForm.contactAddress"/>
                </el-form-item>

                <el-form-item
                    label="居住地址"
                >
                    <el-input v-model="editForm.liveAddress"/>
                </el-form-item>

                <el-form-item
                    label="就业状态"
                    prop="employmentStatus"
                >
                    <el-radio-group
                        v-model="editForm.employmentStatus"
                        size="medium"
                    >
                        <el-radio
                            label="参军"
                            border
                        >
                            参军
                        </el-radio>
                        <el-radio
                            label="未就业"
                            border
                        >
                            未就业
                        </el-radio>
                        <el-radio
                            label="已就业"
                            border
                        >
                            已就业
                        </el-radio>
                        <el-radio
                            label="拟升学"
                            border
                        >
                            拟升学
                        </el-radio>
                        <el-radio
                            label="专升本"
                            border
                        >
                            专升本
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="直属主管"
                    prop="boss"
                >
                    <el-input v-model="editForm.boss"/>
                </el-form-item>
                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="主管电话"
                    prop="bossPhone"
                >
                    <el-input
                        v-model="editForm.bossPhone"
                        onkeyup="value=value.replace(/[^\d]/g,'')"
                    />
                </el-form-item>

                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="实习薪资"
                    prop="money"
                >
                    <el-input v-model="editForm.money"/>
                </el-form-item>
                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="企业名称"
                    prop="entName"
                >
                    <el-input v-model="editForm.entName"/>
                </el-form-item>

                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="企业岗位"
                    prop="postName"
                    width="200px"
                >
                    <el-input v-model="editForm.postName"/>
                </el-form-item>

                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="岗位职责"
                    prop="responsibility"
                >
                    <el-input
                        autosize
                        type="textarea"
                        v-model="editForm.responsibility"
                    />
                </el-form-item>
                <el-form-item
                    v-if="editForm.employmentStatus === '已就业'"
                    label="工作地址"
                    prop="workAddress"
                >
                    <el-cascader
                        style="width: 360px"
                        placeholder="试试搜索城市名称吧~"
                        v-model="EditWorkAddress"
                        :options="workerNativePlaceCascaderOptions"
                        :props="{ expandTrigger: 'hover' }"
                        filterable
                        clearable
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
            v-if = !isDisable
            type="primary"
            @click="editstudent"
        >修改信息</el-button>
      </span>
        </el-dialog>

        <!--    删除学生对话框-->
        <el-dialog
            title="删除学生"
            :visible.sync="deleteDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <span>确认删除吗?</span>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="deletestudent"
        >删除学生</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    // 导入省市数据及解释器
    import { provinceAndCityData, CodeToText } from 'element-china-area-data'
    import moment from 'moment'
    import { stringify } from 'cli-highlight'

    export default {
        name: 'StudentData',
        data () {
            return {
                selectOption: [
                    { value: 'noSearch', label: '暂无搜索' },
                    { value: 'stuId', label: '学生学号' },
                    { value: 'name', label: '学生姓名' },
                    { value: 'sex', label: '学生性别' },
                    { value: 'homeAddress', label: '学生籍贯' },
                    { value: 'className', label: '班级名称' },
                    { value: 'employmentStatus', label: '就业状态'}
                ],
                tableHeader: [
                    { label: '学生学号', prop: 'stuId', width: 150, fixed: 'left' },
                    { label: '学生姓名', prop: 'name', width: 150, fixed: 'left' },
                    { label: '学生性别', prop: 'sex', width: 100 },
                    { label: '学生届数', prop: 'classNumber', width: 100 },
                    { label: '所属班级', prop: 'className', width: 150 },
                    { label: '所属专业', prop: 'proName', width: 150 },
                    { label: '毕业院校', prop: 'school', width: 150 },
                    { label: '身份证号', prop: 'cardId', width: 240 },
                    { label: '民族', prop: 'national', width: 100 },
                    { label: '学历', prop: 'education', width: 80 },
                    { label: '政治面貌', prop: 'politicalStatus', width: 150 },
                    { label: '邮箱地址', prop: 'email', width: 260 },
                    { label: '联系电话', prop: 'phone', width: 150 },
                    { label: '联系地址', prop: 'contactAddress', width: 350 },
                    { label: '居住地', prop: 'liveAddress', width: 350 },
                    { label: '学生籍贯', prop: 'homeAddress', width: 120 },
                    { label: '就业状态', prop: 'employmentStatus', width: 100 },
                    { label: '企业名称', prop: 'entName', width: 200 },
                    { label: '岗位名称', prop: 'postName', width: 200 },
                    { label: '岗位职责', prop: 'responsibility', width: 300 },
                    { label: '最新薪资', prop: 'money', width: 150 },
                    { label: '工作地址', prop: 'workAddress', width: 350 },
                    { label: '直属主管', prop: 'boss', width: 150 },
                    { label: '主管电话', prop: 'bossPhone', width: 180 },
                ],
                // 企业地址数据
                chinaAddress: provinceAndCityData,
                noEmployment: [
                    { value: '参军', label: '参军' },
                    { value: '待就业', label: '待就业' },
                    { value: '拟升学', label: '拟升学' },
                    { value: '已就业', label: '已就业' }
                ],
                // 联动菜单数据
                cascaderOptions: [],
                /** 数据表格 */
                // 数据表格数据绑定
                queryInfo: {
                    // 当前搜索关键字
                    keyWord: '',
                    // 当前搜索类型(按照学号或者名称)
                    queryType: 'noSearch',
                    // 数据展示类型(默认显示所有数据)
                    searchType: '全部',
                    // 当前页数
                    pageNum: 1,
                    // 当前每页显示多少条数据
                    pageSize: 5
                },
                isDisable: false,
                deleteStuId:'',
                page: {
                    current: 1,
                    limit: 10,
                    total: 0
                },
                // 显示学生数据是否附带显示类型
                isSearchType: false,
                // 数据表格数据
                tableData: [],
                // 总共多少条数据
                total: 0,
                /** 控制添加学生对话框的显示与隐藏 */
                addDialogVisible: false,
                /** 控制修改学生对话框的显示与隐藏 */
                editDialogVisible: false,
                /** 控制删除学生对话框的显示与隐藏 */
                deleteDialogVisible: false,
                /** 控制学生回访信息对话框的显示与隐藏 */
                returnVisitDialogVisible: false,
                /** 控制文件上传对话框的显示与隐藏 */
                uploadDialogVisible: true,
                /** 企业岗位联级菜单数据 */
                postDataCascaderOptions: '',
                /** 学生籍贯地址联级菜单数据 */
                studentNativePlaceCascaderOptions: provinceAndCityData,
                workerNativePlaceCascaderOptions : provinceAndCityData,
                /** 学生籍贯地址临时属性 */
                studentNativePlaceTemp: '',
                addWorkAddressPlace:'',
                EditWorkAddress: '',
                /** 新增学生表单数据 */
                addForm: {
                    /**
                     * 学号
                     */
                    stuId: '',
                    /**
                     * 签约企业
                     */
                    entName: '',
                    /**
                     * 班级id
                     */
                    classId: '',
                    /**
                     * 专业id
                     */
                    proId: '',
                    name: '',
                    /**
                     * 身份证号
                     */
                    cardId: '',
                    /**
                     * 毕业院校
                     */
                    school: '',
                    /**
                     * 性别
                     */
                    sex: '',
                    /**
                     * 民族
                     */
                    national: '',
                    /**
                     * 学历
                     */
                    education: '',
                    /**
                     * 政治面貌
                     */
                    politicalStatus: '',
                    /**
                     * 邮箱地址
                     */
                    email: '',
                    /**
                     * 联系电话
                     */
                    phone: '',
                    /**
                     * 联系地址
                     */
                    contactAddress: '',
                    /**
                     * 居住地
                     */
                    liveAddress: '',
                    /**
                     * 户籍
                     */
                    homeAddress: '',
                    /**
                     * 就业状态
                     */
                    employmentStatus: '',
                    /**
                     * 主管联系方式
                     */
                    bossPhone: '',
                    /**
                     * 主管
                     */
                    boss: '',
                    /**
                     * 工资
                     */
                    money: '',

                    /**
                     * 岗位名称
                     */
                    postName: '',
                    /**
                     * 岗位职责
                     */
                    responsibility: '',
                    workAddress:''
                },
                /** 表单验证相关配置 */
                addFormRules: {
                    stuId: [
                        {
                            required: true,
                            message: '请输入学生学号',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 21,
                            message: '长度在 4 到 21 个字符',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请输入学生名称',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 5,
                            message: '长度在 2 到 5 个字符',
                            trigger: 'blur'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '请选择学生性别',
                            trigger: 'blur'
                        }
                    ],
                    classId: [
                        {
                            required: true,
                            message: '请选择班级绑定',
                            trigger: 'blur'
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: '请编写邮箱',
                            trigger: 'blur'
                        }
                    ],
                    proId: [
                        {
                            required: true,
                            message: '请选择专业',
                            trigger: 'blur'
                        }
                    ]
                },
                /** 修改学生表单数据 */
                editForm: {
                    id:'',
                    userId:'',
                    /**
                     * 学号
                     */
                    stuId: '',
                    /**
                     * 签约企业
                     */
                    entName: '',
                    /**
                     * 班级id
                     */
                    classId: '',
                    /**
                     * 专业id
                     */
                    proId: '',
                    name: '',
                    /**
                     * 身份证号
                     */
                    cardId: '',
                    /**
                     * 毕业院校
                     */
                    school: '',
                    /**
                     * 性别
                     */
                    sex: '',
                    /**
                     * 民族
                     */
                    national: '',
                    /**
                     * 学历
                     */
                    education: '',
                    /**
                     * 政治面貌
                     */
                    politicalStatus: '',
                    /**
                     * 邮箱地址
                     */
                    email: '',
                    /**
                     * 联系电话
                     */
                    phone: '',
                    /**
                     * 联系地址
                     */
                    contactAddress: '',
                    /**
                     * 居住地
                     */
                    liveAddress: '',
                    /**
                     * 户籍
                     */
                    homeAddress: '',
                    /**
                     * 就业状态
                     */
                    employmentStatus: '',
                    /**
                     * 主管联系方式
                     */
                    bossPhone: '',
                    /**
                     * 主管
                     */
                    boss: '',
                    /**
                     * 工资
                     */
                    money: '',

                    /**
                     * 岗位名称
                     */
                    postName: '',
                    /**
                     * 岗位职责
                     */
                    responsibility: '',
                    workAddress:''
                },
                /** 编辑表单验证相关配置 */
                editFormRules: {
                    stuId: [
                        {
                            required: true,
                            message: '请输入学生学号',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 21,
                            message: '长度在 4 到 21 个字符',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请输入学生名称',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 5,
                            message: '长度在 2 到 5 个字符',
                            trigger: 'blur'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '请选择学生性别',
                            trigger: 'blur'
                        }
                    ],
                    classId: [
                        {
                            required: true,
                            message: '请选择班级绑定',
                            trigger: 'blur'
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: '请编写邮箱',
                            trigger: 'blur'
                        }
                    ],
                    proId: [
                        {
                            required: true,
                            message: '请选择专业',
                            trigger: 'blur'
                        }
                    ]
                },
                proOptions: [],
                classOptions: [],
                user: JSON.parse(window.sessionStorage.getItem('user'))
            }
        },
        // 监控数据改变
        watch: {
            // 当用户选择搜索学生的前置条件则锁定筛选数据类型为全部数据并禁用单选框否则应该清空输入框数据
            'queryInfo.queryType': function (val) {
                if (val !== 'noSearch') {
                    this.queryInfo.searchType = '全部'
                    this.isSearchType = true
                } else {
                    this.isSearchType = false
                    this.queryInfo.keyWord = ''
                    this.getStudentData()
                }
            },
            studentNativePlaceTemp: function (val) {
                if (val.length !== 0) {
                    const data = CodeToText[val[0]] + '-' + CodeToText[val[1]]
                    this.editForm.homeAddress = data
                    this.addForm.homeAddress = data
                } else {
                    this.editForm.homeAddress = ''
                    this.addForm.homeAddress = ''
                }
            },
            addWorkAddressPlace:function (val) {
                if (val.length !== 0) {
                    const data = CodeToText[val[0]] + '-' + CodeToText[val[1]]
                    this.addForm.workAddress = data
                } else {
                    this.addForm.workAddress = ''
                }
            },
            EditWorkAddress:function (val) {
                if (val.length !== 0) {
                    const data = CodeToText[val[0]] + '-' + CodeToText[val[1]]
                    this.editForm.workAddress = data
                } else {
                    this.editForm.workAddress = ''
                }
            }
        },
        /** 生命周期函数 */
        created () {
            // 这里是发起表格数据请求的位置
            let user = this.user
            if (user.type === '1' || user.type === '2') {
                this.isDisable = true
            }
            this.getProfessionAndClassesDataCascaderOptions()
            this.getProfessionDataCascader()

            //自动识别请求类型及其数据
            const query = this.$route.query
            for (const key in query) {
                if (key !== undefined && key !== '') {
                    this.queryInfo.keyWord = query[key]
                    this.queryInfo.queryType = key
                }
            }
            // const className = this.$route.query.className
            // if (className !== undefined && className !== '') {
            //     this.queryInfo.keyWord = className
            //     this.queryInfo.queryType = 'className'
            // }


            this.getStudentData()
        },
        /** 事件处理函数 */
        methods: {
            /** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
            setPageNum () {
                this.page.current = 1
                this.getStudentData()
            },
            // 清除修改学生就业状态表单的验证结果
            clearFrom () {
                this.$refs.employmentStatusFormRef.clearValidate()
            },
            /** 获取班级数据 */
            getProfessionAndClassesDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'classRoom/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.classOptions = req.data.data
                            }
                        }
                    }
                })
            },

            /** 获取学生信息 */
            getStudentData () {
                let self = this;
                let queryType = self.queryInfo.queryType;
                let searchType = self.queryInfo.searchType
                let data = {};
                if (searchType !== '全部'){
                    data.employmentStatus = searchType;
                }
                if (queryType === 'stuId'){
                    data.stuId = self.queryInfo.keyWord
                }

                if (queryType === 'name'){
                    data.name = self.queryInfo.keyWord
                }
                if (queryType === 'sex'){
                    data.sex = self.queryInfo.keyWord
                }
                if (queryType === 'homeAddress'){
                    data.homeAddress = self.queryInfo.keyWord
                }
                if (queryType === 'className'){
                    data.className = self.queryInfo.keyWord
                }
                if (queryType === 'employmentStatus'){
                    data.employmentStatus = self.queryInfo.keyWord
                }
                data.current = self.page.current
                data.limit = self.page.limit
                let students = []
                self.utils.sendReq({
                    queryUrl: '/student/query',
                    req: {
                        method: 'post',
                        data:data,
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.page.total = req.data.data.page.rows
                                for (let i in req.data.data.students) {
                                    students.push(req.data.data.students[i])
                                }
                                self.tableData = students
                            }
                        }
                    }
                })
            },

            /** 添加学生操作 */
            addstudent () {
                let self = this;
                self.$refs.addFormRef.validate(async valid => {
                    if (valid) {
                        // 修复 多次添加学生信息，已就业学生表单会污染其他表单
                        if (self.addForm.employmentStatus !== '已就业') {
                            self.addForm.boss = ''
                            self.addForm.bossPhone = ''
                            self.addForm.money = ''
                            self.addForm.postName = ''
                            self.addForm.responsibility = ''
                        }
                        let data = {};
                        data = self.addForm;
                        self.utils.sendReq({
                            queryUrl: '/student/add',
                            req: {
                                data:  data ,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getStudentData()
                                        self.addDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },

            /** 修改学生操作 */
            editDialogVisible1 (studentData) {
                for (const key in studentData) {
                    this.editForm[key] = studentData[key]
                }
                // 自动显示单位地址
                const chinaAddress = this.studentNativePlaceCascaderOptions
                const address = studentData.homeAddress.split('-')
                const arr1 = []
                for (let i = 0; i < chinaAddress.length; i++) {
                    // 获取省份
                    if (chinaAddress[i].label === address[0]) {
                        arr1.push(chinaAddress[i].value)
                        for (let ii = 0; ii < chinaAddress[i].children.length; ii++) {
                            // 获取市区等
                            if (chinaAddress[i].children[ii].label === address[1]) {
                                arr1.push(chinaAddress[i].children[ii].value)
                            }
                        }
                    }
                }
                this.studentNativePlaceTemp = arr1

                // 自动显示单位地址
                const chinaAddress1 = this.workerNativePlaceCascaderOptions
                const address1 = studentData.workAddress.split('-')
                const arr2 = []
                for (let i = 0; i < chinaAddress1.length; i++) {
                    // 获取省份
                    if (chinaAddress1[i].label === address1[0]) {
                        arr2.push(chinaAddress1[i].value)
                        for (let ii = 0; ii < chinaAddress1[i].children.length; ii++) {
                            // 获取市区等
                            if (chinaAddress1[i].children[ii].label === address1[1]) {
                                arr2.push(chinaAddress1[i].children[ii].value)
                            }
                        }
                    }
                }
                this.EditWorkAddress = arr2

                this.editDialogVisible = true
            },
            editstudent () {
                let self = this;
                let data = self.editForm;
                this.$refs.editFormRef.validate(valid => {
                    if (valid) {
                        // 修复 多次修改学生信息，已就业学生表单会污染其他表单
                        if (this.editForm.employmentStatus !== '已就业') {
                            self.editForm.boss = ''
                            self.editForm.bossPhone = ''
                            self.editForm.money = ''
                            self.editForm.postName = ''
                            self.editForm.responsibility = ''
                        }
                        this.utils.sendReq({
                            queryUrl: 'student/update',
                            req: {
                                data: data,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getStudentData()
                                        self.editDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })

                    }
                })
            },

            /** 删除学生操作 */
            deleteDialogVisible1 (id) {
                this.deleteStuId = id
                this.deleteDialogVisible = true
            },
            deletestudent () {
                let self = this;
                let deleteStuId = self.deleteStuId;
                this.utils.sendReq({
                    queryUrl: `student/delete/${deleteStuId}`,
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'success',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                                self.getStudentData();
                            }
                            if (req.data.code === 400) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'error',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                            }
                        },
                        error: function () {
                            self.$message({
                                message: '接口请求失败！',
                                type: 'error',
                                showClose: true,
                                center: true
                            })
                            self.deleteDialogVisible = false
                        }
                    }
                })
            },

            /** 获取企业岗位联级菜单数据 */
            getProfessionDataCascader () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'professionalType/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.proOptions = req.data.data
                            }
                        }
                    }
                })
            },

            /** 时间格式化 */
            dateFormatter: function (row, column) {
                var date = row[column.property]
                if (date === undefined) return ''
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
            },

            /** 监听每页显示多少数据的改变 */
            handleSizeChange (newSize) {
                this.page.limit = newSize
                this.getStudentData()
            },

            /** 监听页码的改变 */
            handleCurrentChange (newPage) {
                this.page.current = newPage
                this.getStudentData()
            },
            /** 跳转到企业数据页面并显示本学生对应的企业 */
            toClassRoom (className) {
                if (className === '') {
                    return this.$message({
                        message: '此学生未版定班级！',
                        type: 'warning',
                        showClose: true,
                        center: true
                    })
                }
                this.$router.push({
                    path: '/admin/classesManage',
                    query: {
                        className: className
                    }
                })
            },
            rowStyle (row, rowIndex) {
                return 'height : 35px'
            },
            cellStyle () {
                return 'padding : 2px'
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-table {
        align-items: center;
        margin-top: 25px;
    }

    /deep/ .el-col {
        padding-right: 0 !important;
    }

    /deep/ .el-radio-group label {
        width: 85px;
        margin-right: 10px;
    }

    .el-pagination {
        margin-top: 25px;
    }

    .el-cascader {
        width: 280px;
    }

    .el-select {
        width: 105px;
        height: 100%;
    }

</style>
